<template>
  <div class="article-list">
    <van-pull-refresh
      v-model="refreshing"
      @refresh="onRefresh"
      :success-duration="1500"
      success-text="刷新成功"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        @load="onLoad"
      >
        <article-item
          v-for="article in list"
          :key="article.art_id"
          :article="article"
        >
        </article-item>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getArticles } from '@/api/article'
import articleItem from './article-item'

export default {
  name: 'ArticleList',
  components: { articleItem },
  props: {
    channel: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      list: [],
      loading: false, // 表示数据是否加载中，默认值是false
      finished: false, // 是否所有数据加载完毕，默认是false
      error: false, // 用来控制是否出错
      timestamp: null, // 存下一页数据的起始时间戳的
      refreshing: false // 记录是否下拉刷新中
    }
  },
  methods: {
    async onLoad () {
      try {
        // 1. 利用分页参数等调用接口获取列表数据
        const { data } = await getArticles({
          channel_id: this.channel.id,
          timestamp: this.timestamp || Date.now(),
          with_top: 1
        })
        // 模拟网络偶尔出现异常的代码，去进行测试
        // if (Math.random() > 0.5) {
        //   JSON.parse('abc')
        // }

        // 2. 把拿到的数据追加到数组的尾部
        this.list.push(...data.results)
        // 3. 把loading是否加载中设置为false
        this.loading = false

        // 4. 判断还有没有下一页的数据
        //    如果返回的pre_timestamp属性为null, 代表已经是最后一页数据
        if (data.pre_timestamp) {
          // 6. 如果还有下一页数据就修改
          //    分页参数：让下一次调接口的时候获取的时下一页的数据
          this.timestamp = data.pre_timestamp
        } else {
          // 5. 如果没有下一页的数据就把finished设置为true：
          // 表示所有数据已加载完毕
          this.finished = true
        }
      } catch (error) {
        this.loading = false
        this.error = true
      }
    },
    onRefresh () {
      //  1. 清空重置列表数据
      this.list = []
      this.loading = true
      this.finished = false
      this.error = false
      this.timestamp = null

      // 2. 重新加载数据， 自己调用 onLoad即可
      this.onLoad()

      // 3. 恢复refreshing
      this.refreshing = false
    }
  }
}
</script>

<style lang="less" scoped>
.article-list {
  height: calc(100vh - 188px);
  overflow: auto;
  margin-top: 88px;
}
</style>
